<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2023/5/5
  Time: 11:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        td,
        th {
            border: 1px solid rgb(190, 190, 190);
            padding: 10px;
        }

        td {
            text-align: center;
        }

        tr:nth-child(even) {
            background-color: #eee;
        }

        th[scope='col'] {
            background-color: #696969;
            color: #fff;
        }

        th[scope='row'] {
            background-color: #d7d9f2;
        }

        caption {
            padding: 10px;
            caption-side: bottom;
        }

        table {
            border-collapse: collapse;
            border: 2px solid rgb(200, 200, 200);
            letter-spacing: 1px;
            font-family: sans-serif;
            font-size: 0.8rem;
        }
        /*#display{*/
        /*    display: none;*/
        /*}*/

    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th scope="col">员工编号</th>
            <th scope="col">姓名</th>
            <th scope="col">部门名称</th>
            <th scope="col">查看信息</th>
            <th scope="col">修改</th>
            <th scope="col">删除</th>
        </tr>
        <tr v-for="e in emps" id="e.empid">
            <th scope="row">{{e.empid}}</th>
            <td>{{e.ename}}</td>
            <td>{{e.dname}}</td>
            <td><button @click="search(e.empid)">查看/修改信息</button>
            <td><button @click="delete(e.empid)">删除</button></td>
        </tr>
        <button @click="add">新增员工</button>
        <button @click="look">查看emps</button>
    </table>
<%--    <div id="display"><%ArrayList list = (ArrayList) request.getAttribute("list"); %></div>--%>
</div>
</body>
<script>
    Vue.config.productionTip = false;
    var flag = '<%=request.getParameter("flag")%>';
    const vm = new Vue({
        el:'#app',
        data:{
            emps:[],
        },
        methods:{
            add(){
                window.location.href="register.jsp"
            },
            search(empid){
                axios.get("${pageContext.request.contextPath}/employee?act=search&empid="+empid).then(result=>{
                    // console.log("home.search中得到的result:"+result.data);
                    <%--window.location.href=`${pageContext.request.contextPath}/getdata?ename=${result.data.ename}&egendar=${result.data.egendar}&depid=${result.data.depid}`;--%>
                    window.location.href="update.jsp?ename="+result.data.ename+
                    "&egendar="+result.data.egendar+"&depid="+result.data.depid,"&empid="+empid;
                })
            },
            delete(empid){
                const flags = confirm("是否要删除此信息？");
                if(flags){
                    axios.get("${pageContext.request.contextPath}/employee?act=delete&empid="+empid).then(result=>{
                        if(flag=="false"){
                            alert("删除员工信息失败!");
                        }else{alert("删除员工信息成功！")}
                    })
                }
            },
            look(){
                console.log(this.emps)
                console.log(JSON.stringify(this.emps))
            }
        },
        //载入页面时请求数据并通过Vue循环渲染到页面上
        mounted(){
            axios.get("${pageContext.request.contextPath}/employee?act=allemp").then(result=>{
                // console.log("allemp 直接输出result："+result)
                // console.log("allemp 直接输出result.data:"+result.data)
                // console.log("allemp 调用了json序列化:"+JSON.stringify(result.data));
                // console.log("allemp 调用了json反编译序列化:"+JSON.parse(JSON.stringify(result.data)));
                console.log(result);
                console.log(result.data);
                this.emps=result.data;
            })
        }
    })
</script>
</html>
